<script setup lang="ts">
import { defineProps, ref, onMounted } from "vue";
import { likeCourse } from "@/api/user/like";
import { ElMessage } from "element-plus";
import likeIcon from "@/assets/icons/like.png";
import unlikeIcon from "@/assets/icons/unlike.png";
import { useRouter } from "vue-router";

const router = useRouter();

interface Course {
  id: number;
  name: string;
  image: string;
  likesCount: number;
  userId: number;
  username?: string;
  avatar?: string;
}

const props = defineProps<{
  course: Course;
}>();

const isLiked = ref(false);
const localLikesCount = ref(props.course.likesCount);

// 初始化点赞状态
onMounted(() => {
  const likedCourses = JSON.parse(localStorage.getItem("likedCourses") || "[]");
  isLiked.value = likedCourses.includes(props.course.id);
});

// 处理点赞
const handleLike = async () => {
  try {
    await likeCourse({ courseId: Number(props.course.id) });
    isLiked.value = !isLiked.value;

    // 更新本地存储
    const likedCourses = JSON.parse(
      localStorage.getItem("likedCourses") || "[]"
    );
    if (isLiked.value) {
      likedCourses.push(props.course.id);
      localLikesCount.value++;
    } else {
      const index = likedCourses.indexOf(props.course.id);
      if (index > -1) {
        likedCourses.splice(index, 1);
        localLikesCount.value--;
      }
    }
    localStorage.setItem("likedCourses", JSON.stringify(likedCourses));

    ElMessage.success(isLiked.value ? "点赞成功" : "已取消点赞");
  } catch (error) {
    ElMessage.error("操作失败，请稍后重试");
  }
};
</script>

<template>
  <el-card
    class="course-card"
    :body-style="{ padding: '0px' }"
    @click="
      router.push(`/home/course/${course.id}?categoryId=${course.categoryId}`)
    "
  >
    <img :src="course.image" class="course-image" />
    <div class="course-info">
      <h3 class="course-title">{{ course.name }}</h3>
      <div class="course-footer">
        <div class="author-info">
          <el-avatar
            :size="30"
            :src="
              course.avatar ||
              'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
            "
          />
          <span class="username">{{ course.username || "未知用户" }}</span>
        </div>
        <div class="likes-info">
          <img
            :src="isLiked ? likeIcon : unlikeIcon"
            class="like-icon"
            @click.stop="handleLike"
          />
          <span>{{ localLikesCount }}</span>
        </div>
      </div>
    </div>
  </el-card>
</template>

<style scoped>
.course-card {
  width: 280px;
  margin: 10px;
  transition: transform 0.3s;
}

.course-card:hover {
  transform: translateY(-5px);
}

.course-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.course-info {
  padding: 14px;
}

.course-title {
  margin: 0;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.username {
  font-size: 14px;
  color: #666;
}

.likes-info {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #409eff;

  .like-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: transform 0.2s;

    &:hover {
      transform: scale(1.1);
    }
  }
}
</style>
